export const metadata = { 
  description: "Learn how to set up Jazz in your React Native application."
};

import { Alert, CodeGroup } from "@/components/forMdx";

# React Native Installation and Setup

This guide covers setting up Jazz for React Native applications from scratch. If you're using Expo, please refer to the [React Native - Expo](/docs/react-native-expo/project-setup) guide instead. If you just want to get started quickly, you can use our [React Native Chat Demo](https://github.com/garden-co/jazz/tree/main/examples/chat-rn) as a starting point.

Jazz supports the [New Architecture](https://reactnative.dev/architecture/landing-page) for React Native.

Tested with:

<CodeGroup>
```json
"react-native": "0.79.2",
"react": "18.3.1"
```
</CodeGroup>

## Installation

### Create a new project

(Skip this step if you already have one)

<CodeGroup>
```bash
npx @react-native-community/cli init myjazzapp
cd myjazzapp
```
</CodeGroup>

If you intend to build for iOS, you can accept the invitation to install CocoaPods. If you decline, or you get an error, [you can install it with `pod-install`](#install-cocoapods).

### Install dependencies

<CodeGroup>
```bash
# React Native dependencies
npm install @react-native-community/netinfo @bam.tech/react-native-image-resizer

# React Native polyfills
npm install @azure/core-asynciterator-polyfill react-native-url-polyfill readable-stream react-native-get-random-values @op-engineering/op-sqlite react-native-mmkv react-native-fast-encoder

# Jazz dependencies
npm install jazz-tools
```
</CodeGroup>

### Add polyfills

Jazz provides a quick way for you to apply the polyfills in your project. Import them in your root `index.js` file:

<CodeGroup>
```ts project-setup/index.js
```
</CodeGroup>

## Authentication

Jazz provides authentication to help users access their data across multiple devices. For details on implementing authentication, check our [Authentication Overview](/docs/key-features/authentication/overview) guide and see the [React Native Chat Demo](https://github.com/garden-co/jazz/tree/main/examples/chat-rn) for a complete example.

## Next Steps

Now that you've set up your React Native project for Jazz, you'll need to:

1. [Set up the Jazz Provider](/docs/project-setup/providers) - Configure how your app connects to Jazz
2. [Add authentication](/docs/key-features/authentication/overview) (optional) - Enable users to access data across devices
3. Define your schema - See the [schema docs](/docs/core-concepts/covalues/overview) for more information
4. Run your app:

<CodeGroup>
```sh
# Start Metro
npm run start

# In a new terminal tab:
npm run ios
# or
npm run android
```
</CodeGroup>

If all goes well, your app should start up without any angry red error screens. Take a quick look at the Metro console too - no Jazz-related errors there means you're all set! If you see your app's UI come up smoothly, you've nailed the installation.

If you run into any issues that aren't covered in the Common Issues section, [drop by our Discord for help](https://discord.gg/utDMjHYg42).

## Common Issues

- **Metro bundler errors**: If you see errors about missing polyfills, ensure you installed them all and are importing them correctly
- **iOS build failures**: Make sure you've run `pod install` after adding the dependencies.
- **Android build failures**: Ensure your Android SDK and NDK versions are compatible with the native modules.

### Install CocoaPods

If you're compiling for iOS, you'll need to install CocoaPods for your project. If you need to install it, we recommend using [`pod-install`](https://www.npmjs.com/package/pod-install):

<CodeGroup>
```bash
npx pod-install
```
</CodeGroup>
